<template>
    <div :class="['status',cla]">
        {{statusDict[status].name}}
    </div>
</template>

<script>
    const statusDict = {
        keeping:{
            name : "进行中"
        },
        finished:{
            name : "已完成"
        }
    };

    export default {
        name: "Status",
        props:{
            status:{
                type:String,
                default:"keeping"
            }
        },
        data(){
            return{
                statusDict : statusDict,
            }
        },
        computed:{
            cla(){
                return this.status;
            }
        }
    }
</script>

<style lang="scss" scoped>
    @import "../treasure";
    .status{
        padding:1px 6px;
        border-radius: 50rem;
    }

    .keeping{
        color:$white;
        font-size: 12px;
        background: $orange;
    }
    .finished{
        color:$gray-600;
        font-size: 12px;
        background: $orange;
    }

</style>